<template>
  <div>
    <!-- 搜索页 -->
    <div>
      <!--<van-search v-model="value" placeholder="请输入搜索关键词" />
      onsearch 事件在用户按下"ENTER（回车）" 按键或点击 type="search" 的 <input> 元素的 "x(搜索)" 按钮时触发。
      -->
      <form action="/">
        <van-search
          v-model="value"
          shape="round"
          placeholder="请输入搜索关键词"
          @search="onSearch()"
        />
      </form>
    </div>
    <div>
      <ul class="ui">
        <li v-for="(item, index) in searchList" :key="index">
          <van-button type="default" round @click="onbtn(index)">
            {{ item.first }}
          </van-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      //搜索关键字
      searchList: [],
    };
  },
  created() {
    //获取默认搜索关键字
    this.getSearchList();
  },
  methods: {
    getSearchList() {
      this.$http("/search/hot")
        .then((res) => {
          //console.log(res.data.result.hots);
          this.searchList = res.data.result.hots;
          //console.log(this.searchList)
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //点击搜索，跳转页面
    onSearch() {
      this.$router.push({ name: "search_btn", params: {userId:this.value} });
    },
    //点击按钮，搜索框中得到关键词
    onbtn(index) {
      this.value = this.searchList[index].first;
    },
  },
};
</script>

<style scoped>
.ui {
  list-style: none;
  padding: 10px;
}
.ui li {
  padding: 5px;
  float: left;
}
.btn {
  background-color: #f4f4f4;
}
</style>